<template>
    <div>
        <h1 style="text-align: center;">商品添加</h1>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="商品名称">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格">
                <el-input v-model="form.price"></el-input>
            </el-form-item>
            <el-form-item label="商品分类">
                <template slot-scope="scope">
                    <el-select v-model="form.catname" placeholder="请选择商品分类">
                        <el-option v-for="item in catlist" :label="item.catname" :value="item.catname" :key="item._id"></el-option>
                    </el-select>
                </template>
            </el-form-item>
            <el-form-item label="是否上架">
                <template>
                    <el-switch
                        v-model="form.enable"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                    </el-switch>
                </template>
            </el-form-item>
            <el-form-item label="商品规格">
                <div class="specs" v-for="(item, index) in form.spec" :key="item.id">
                <el-input v-model="item.value"></el-input>
                <el-button @click="addspec" v-if="index === form.spec.length - 1" type="primary" icon="el-icon-circle-plus-outline" circle></el-button>
                <el-button @click="remspec" v-if="index === form.spec.length - 1 && form.spec.length > 2" type="primary" icon="el-icon-remove-outline" circle></el-button>
                </div>
            </el-form-item>
            <el-form-item label="商品种类">
                <div class="specs" v-for="(item, index) in form.kinds" :key="item.id">
                    <el-input v-model="item.value"></el-input>
                    <el-button @click="addkind" v-if="index === form.kinds.length - 1" type="primary" icon="el-icon-circle-plus-outline" circle></el-button>
                    <el-button @click="remkind" v-if="index === form.kinds.length - 1 && form.kinds.length > 2 " type="primary" icon="el-icon-remove-outline" circle></el-button>
                </div>
            </el-form-item>
            <!-- 
            action  必选参数，上传的地址
            accept  接受上传的文件类型
            show-file-list 是否显示已上传文件列表
            name    上传的文件字段名
            on-success  文件上传成功时的钩子  function(response, file, fileList)
             -->
            <el-form-item label="商品图片">
                <el-upload
                    class="upload-demo"
                    action="/admin/api/uploads"
                    accept=".jpg,.png,.jpeg,.webp,.gif"
                    :show-file-list="false"
                    name="dishimg"
                    :on-success="successUpload"
                    >
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
                <img v-show="form.imgpath === '' " width="200px" height="200px" src="../../assets/noimg.gif" alt="">
                <img v-show="form.imgpath != '' " width="200px" height="200px" :src="'/admin/' + form.imgpath"   alt="">
            </el-form-item>
            <el-form-item label="商品详情">
                <quill-editor v-model="form.detail"
                    :options="editorOption">
                </quill-editor>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onclick">立即新增</el-button>
                <el-button @click="$router.back()">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { catList, dishAdd } from '@/request'
export default {
    components: {
        quillEditor
    },
    data () {
        return {
            editorOption: {
                // some quill options
            },
            catlist:[],
            form:{
                name:'',
                price:'',
                catname:'',
                enable:'false',
                imgpath:'',
                detail:'',
                spec: [
                    {
                        id: 1,
                        value: ''
                    },
                    {
                        id: 2,
                        value: ''
                    }
                ],
                kinds: [
                    {
                        id: 1,
                        value: ''
                    },
                    {
                        id: 2,
                        value: ''
                    }
                ],
            },
            
        }
    },
    methods: {
        async onclick() {
            // console.log(this.form);
            // this.form.a=1
            let specifications = this.form.spec.map(item => item.value).join('=====')
            let kind = this.form.kinds.map(item => item.value).join('=====')
            this.form.specifications=specifications
            this.form.kind=kind
            // console.log(this.form);
            // return
            let data = await dishAdd(this.form)
            console.log(222,data);
            let { error_code,msg } = data
            if(error_code === 200 ){
                this.$message({
                    type: 'success',
                    duration: 1500,
                    message: msg,
                    onClose: () => {
                        this.$router.push('/dish/list')
                    }
                })
            } else {
                this.$message({
                    type: 'error',
                    duration: 1500,
                    message: msg,
                })
            }      
        },
        async GetCatList() {
            let data = await catList()
            this.catlist = data.data.catlist
            // console.log(this.catlist);
        },
        addspec() {
            this.form.spec.push({
                id: this.form.spec.length + 1,
                value: ''
            })
        },
        remspec() {
            this.form.spec.pop()
        },
        addkind() {
            this.form.kinds.push({
                id: this.form.kinds.length + 1,
                value: ''
            })
        },
        remkind(){
            this.form.kinds.pop()
        },
        successUpload(response, file, fileList) {
            // console.log(response, file, fileList);
            this.form.imgpath = response.data.filepath
            // console.log(this.form.imgpath);

        },
    },
    created() {
        this.GetCatList()
    },
    
}
</script>

<style lang="scss" scoped> 
.el-input{
    width: 87%;
}
.el-input__inner{
    width: 97% !important;
}
    .specs{
        display: flex;
        .el-button.is-circle{
            padding: 0;
        }
        .el-button{
            border-radius: 50% !important;
            font-size: 39px;
        }
        .el-input{
            width: 87%;
        }
        
    }
    .quill-editor{
        width: 800px;
        height: 400px;
        background-color: #fff;
    }
</style>
